<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员服务 - 突袭简历</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/pricing.css">
    <link rel="stylesheet" href="css/mobile.css">
    <link rel="icon" href="images/favicon.svg" type="image/svg+xml">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <a href="index.html">
                    <span class="logo-text">突袭简历</span>
                </a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="templates.html">简历模板</a></li>
                    <li><a href="resume-editor.html">简历编辑</a></li>
                    <li><a href="resume-analysis.html">AI分析</a></li>
                    <li><a href="pricing.html" class="active">会员服务</a></li>
                </ul>
            </nav>
            <div class="user-actions">
                <a href="login.html" class="btn btn-login">登录</a>
                <a href="register.html" class="btn btn-primary">注册</a>
            </div>
            <button class="mobile-menu-toggle">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </header>

    <section class="page-header">
        <div class="container">
            <h1>会员服务</h1>
            <p>选择适合您的会员套餐，享受更多专业功能</p>
        </div>
    </section>

    <section class="pricing-toggle">
        <div class="container">
            <div class="toggle-container">
                <span class="toggle-label">按月付费</span>
                <label class="toggle-switch">
                    <input type="checkbox" id="billing-toggle">
                    <span class="toggle-slider"></span>
                </label>
                <span class="toggle-label">按年付费</span>
                <span class="discount-badge">省20%</span>
            </div>
        </div>
    </section>

    <section class="pricing-plans">
        <div class="container">
            <div class="plans-grid">
                <!-- 免费计划 -->
                <div class="plan-card">
                    <div class="plan-header">
                        <h3>免费版</h3>
                        <div class="plan-price">
                            <span class="price">¥0</span>
                            <span class="period">永久免费</span>
                        </div>
                        <p class="plan-description">适合初次尝试的用户</p>
                    </div>
                    <div class="plan-features">
                        <ul>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>基础简历模板（3个）</span>
                            </li>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>简历在线编辑</span>
                            </li>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>PDF导出（带水印）</span>
                            </li>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>基础求职文章</span>
                            </li>
                            <li class="feature-excluded">
                                <img src="images/icon-cross.svg" alt="不包含">
                                <span>高级简历模板</span>
                            </li>
                            <li class="feature-excluded">
                                <img src="images/icon-cross.svg" alt="不包含">
                                <span>AI简历分析</span>
                            </li>
                            <li class="feature-excluded">
                                <img src="images/icon-cross.svg" alt="不包含">
                                <span>简历优化建议</span>
                            </li>
                            <li class="feature-excluded">
                                <img src="images/icon-cross.svg" alt="不包含">
                                <span>无水印导出</span>
                            </li>
                        </ul>
                    </div>
                    <div class="plan-footer">
                        <a href="register.html" class="btn btn-outline">免费注册</a>
                    </div>
                </div>

                <!-- 标准计划 -->
                <div class="plan-card">
                    <div class="plan-header">
                        <h3>标准会员</h3>
                        <div class="plan-price monthly-price">
                            <span class="price">¥39</span>
                            <span class="period">/月</span>
                        </div>
                        <div class="plan-price yearly-price" style="display: none;">
                            <span class="price">¥374</span>
                            <span class="period">/年</span>
                        </div>
                        <p class="plan-description">适合求职中的用户</p>
                    </div>
                    <div class="plan-features">
                        <ul>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>所有免费版功能</span>
                            </li>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>标准简历模板（20个）</span>
                            </li>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>无水印PDF导出</span>
                            </li>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>多种格式导出（PDF/Word）</span>
                            </li>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>AI简历分析（每月3次）</span>
                            </li>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>简历优化建议</span>
                            </li>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>高级求职文章</span>
                            </li>
                            <li class="feature-excluded">
                                <img src="images/icon-cross.svg" alt="不包含">
                                <span>高级简历模板</span>
                            </li>
                        </ul>
                    </div>
                    <div class="plan-footer">
                        <a href="#" class="btn btn-primary">立即购买</a>
                    </div>
                </div>

                <!-- 高级计划 -->
                <div class="plan-card featured">
                    <div class="plan-badge">最受欢迎</div>
                    <div class="plan-header">
                        <h3>高级会员</h3>
                        <div class="plan-price monthly-price">
                            <span class="price">¥69</span>
                            <span class="period">/月</span>
                        </div>
                        <div class="plan-price yearly-price" style="display: none;">
                            <span class="price">¥662</span>
                            <span class="period">/年</span>
                        </div>
                        <p class="plan-description">适合高要求求职者</p>
                    </div>
                    <div class="plan-features">
                        <ul>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>所有标准版功能</span>
                            </li>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>全部简历模板（50+）</span>
                            </li>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>AI简历分析（无限次）</span>
                            </li>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>深度简历优化建议</span>
                            </li>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>ATS优化分析</span>
                            </li>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>行业关键词推荐</span>
                            </li>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>多简历管理</span>
                            </li>
                            <li class="feature-included">
                                <img src="images/icon-check.svg" alt="包含">
                                <span>优先客服支持</span>
                            </li>
                        </ul>
                    </div>
                    <div class="plan-footer">
                        <a href="#" class="btn btn-accent">立即购买</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="features-comparison">
        <div class="container">
            <h2>功能详细对比</h2>
            <div class="comparison-table-wrapper">
                <table class="comparison-table">
                    <thead>
                        <tr>
                            <th>功能</th>
                            <th>免费版</th>
                            <th>标准会员</th>
                            <th>高级会员</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="feature-name">简历模板数量</td>
                            <td>3个</td>
                            <td>20个</td>
                            <td>50+</td>
                        </tr>
                        <tr>
                            <td class="feature-name">简历在线编辑</td>
                            <td><img src="images/icon-check.svg" alt="包含"></td>
                            <td><img src="images/icon-check.svg" alt="包含"></td>
                            <td><img src="images/icon-check.svg" alt="包含"></td>
                        </tr>
                        <tr>
                            <td class="feature-name">PDF导出</td>
                            <td>带水印</td>
                            <td>无水印</td>
                            <td>无水印</td>
                        </tr>
                        <tr>
                            <td class="feature-name">Word导出</td>
                            <td><img src="images/icon-cross.svg" alt="不包含"></td>
                            <td><img src="images/icon-check.svg" alt="包含"></td>
                            <td><img src="images/icon-check.svg" alt="包含"></td>
                        </tr>
                        <tr>
                            <td class="feature-name">AI简历分析</td>
                            <td><img src="images/icon-cross.svg" alt="不包含"></td>
                            <td>每月3次</td>
                            <td>无限次</td>
                        </tr>
                        <tr>
                            <td class="feature-name">简历优化建议</td>
                            <td><img src="images/icon-cross.svg" alt="不包含"></td>
                            <td>基础建议</td>
                            <td>深度建议</td>
                        </tr>
                        <tr>
                            <td class="feature-name">ATS优化分析</td>
                            <td><img src="images/icon-cross.svg" alt="不包含"></td>
                            <td><img src="images/icon-cross.svg" alt="不包含"></td>
                            <td><img src="images/icon-check.svg" alt="包含"></td>
                        </tr>
                        <tr>
                            <td class="feature-name">行业关键词推荐</td>
                            <td><img src="images/icon-cross.svg" alt="不包含"></td>
                            <td><img src="images/icon-cross.svg" alt="不包含"></td>
                            <td><img src="images/icon-check.svg" alt="包含"></td>
                        </tr>
                        <tr>
                            <td class="feature-name">多简历管理</td>
                            <td>1份</td>
                            <td>3份</td>
                            <td>无限</td>
                        </tr>
                        <tr>
                            <td class="feature-name">求职文章访问</td>
                            <td>基础文章</td>
                            <td>全部文章</td>
                            <td>全部文章</td>
                        </tr>
                        <tr>
                            <td class="feature-name">客服支持</td>
                            <td>邮件支持</td>
                            <td>邮件支持</td>
                            <td>优先支持</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <section class="faq-section">
        <div class="container">
            <h2>常见问题</h2>
            <div class="faq-grid">
                <div class="faq-item">
                    <h3>如何选择适合我的会员套餐？</h3>
                    <p>如果您只是想尝试我们的服务，可以先使用免费版。如果您正在积极求职，建议选择标准会员，可以使用更多模板和AI分析功能。对于高要求的求职者，高级会员提供全面的功能支持，帮助您在竞争中脱颖而出。</p>
                </div>
                <div class="faq-item">
                    <h3>会员可以随时取消吗？</h3>
                    <p>是的，您可以随时在账户设置中取消会员订阅。取消后，您的会员权益将持续到当前计费周期结束。我们不提供已支付费用的退款。</p>
                </div>
                <div class="faq-item">
                    <h3>AI简历分析是如何工作的？</h3>
                    <p>我们的AI系统会分析您的简历内容，包括格式、用词、技能匹配度等方面，并提供针对性的改进建议。高级会员还可以获得针对特定职位的ATS优化分析，提高简历通过筛选系统的几率。</p>
                </div>
                <div class="faq-item">
                    <h3>可以在不同设备上访问我的简历吗？</h3>
                    <p>是的，您的简历存储在云端，可以在任何设备上通过登录您的账户进行访问和编辑。我们支持电脑、平板和手机等多种设备。</p>
                </div>
                <div class="faq-item">
                    <h3>如何从标准会员升级到高级会员？</h3>
                    <p>您可以在账户设置中的"会员管理"页面进行升级。系统会自动计算当前计费周期的剩余价值，并将其应用到新的会员计划中。</p>
                </div>
                <div class="faq-item">
                    <h3>支持哪些支付方式？</h3>
                    <p>我们支持微信支付、支付宝、银联卡等多种支付方式，确保您可以方便地完成购买。所有支付信息都经过加密处理，保障您的资金安全。</p>
                </div>
            </div>
        </div>
    </section>

    <section class="cta-section">
        <div class="container">
            <div class="cta-content">
                <h2>准备好提升您的求职竞争力了吗？</h2>
                <p>立即加入突袭简历，创建专业简历，获取AI优化建议，提高求职成功率</p>
                <div class="cta-buttons">
                    <a href="register.html" class="btn btn-light">免费注册</a>
                    <a href="#" class="btn btn-accent">查看简历模板</a>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <div class="footer-logo">
                        <span class="logo-text">突袭简历</span>
                    </div>
                    <p>AI驱动的智能简历优化平台，助力求职者提升竞争力</p>
                    <div class="social-links">
                        <a href="#" aria-label="微信"><span>WeChat</span></a>
                        <a href="#" aria-label="微博"><span>Weibo</span></a>
                        <a href="#" aria-label="QQ"><span>QQ</span></a>
                    </div>
                </div>
                <div class="footer-col">
                    <h4>产品服务</h4>
                    <ul>
                        <li><a href="templates.html">简历模板</a></li>
                        <li><a href="pricing.html">会员服务</a></li>
                        <li><a href="#">AI简历分析</a></li>
                        <li><a href="#">简历优化</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>学习资源</h4>
                    <ul>
                        <li><a href="resume-analysis.html">AI分析</a></li>
                        <li><a href="#">简历写作指南</a></li>
                        <li><a href="#">面试技巧</a></li>
                        <li><a href="#">行业洞察</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>关于我们</h4>
                    <ul>
                        <li><a href="#">公司介绍</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">加入我们</a></li>
                        <li><a href="#">用户协议</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>客户支持</h4>
                    <ul>
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">意见反馈</a></li>
                        <li><a href="#">隐私政策</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 突袭简历 版权所有</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
    <script src="js/pricing.js"></script>
</body>
</html>